<template>
  <!-- Loading State -->
  <div v-if="isLoading" class="loading-container">
    <div class="loading-spinner"></div>
    <p class="loading-text">加载中...</p>
  </div>
  
  <!-- Error State -->
  <div v-else-if="apiError" class="error-container">
    <div class="error-icon">❌</div>
    <h2 class="error-title">加载失败</h2>
    <p class="error-message">{{ apiError }}</p>
    <div class="error-actions">
      <button class="retry-button" @click="$emit('retry')">重试</button>
      <button class="regenerate-button ml-4" @click="$emit('regenerate')">重新生成</button>
    </div>
  </div>
  
  <!-- 文章生成中 -->
  <div v-else-if="articleStatus === ARTICLE_STATUS.GENERATING" class="status-container">
    <div class="status-icon">⏳</div>
    <h2 class="status-title">{{ getStatusDescription(articleStatus) }}</h2>
    <p class="status-message">请稍候，系统正在生成文章内容...</p>
  </div>
  
  <!-- 文章生成错误 -->
  <div v-else-if="articleStatus === ARTICLE_STATUS.ERROR" class="status-container">
    <div class="status-icon">⚠️</div>
    <h2 class="status-title">{{ getStatusDescription(articleStatus) }}</h2>
    <p class="status-message">很抱歉，文章生成过程中出现错误</p>
    <button class="regenerate-button" @click="$emit('regenerate')">重新生成</button>
  </div>
  
  <!-- 文章正在重新生成 -->
  <div v-else-if="articleStatus === ARTICLE_STATUS.REGENERATING" class="status-container">
    <div class="status-icon">🔄</div>
    <h2 class="status-title">{{ getStatusDescription(articleStatus) }}</h2>
    <p class="status-message">请稍候，系统正在重新生成文章内容...</p>
  </div>
  
  <!-- Empty State -->
  <div v-else-if="!essayData.title && !isLoading" class="empty-container">
    <div class="empty-icon">📝</div>
    <h2 class="empty-title">暂无文章内容</h2>
    <p class="empty-message">当前没有可用的文章内容</p>
  </div>
</template>

<script setup>
// 接收父组件传递的数据
const props = defineProps({
  isLoading: Boolean,
  apiError: String,
  articleStatus: Number,
  essayData: Object,
  ARTICLE_STATUS: Object
});

// 定义事件
const emit = defineEmits(['retry', 'regenerate']);

// 获取状态描述
const getStatusDescription = (status) => {
  switch (status) {
    case props.ARTICLE_STATUS.GENERATING:
      return '文章生成中';
    case props.ARTICLE_STATUS.ERROR:
      return '文章生成错误';
    case props.ARTICLE_STATUS.REGENERATING:
      return '文章重新生成中';
    case props.ARTICLE_STATUS.COMPLETED:
      return '文章生成完成';
    case props.ARTICLE_STATUS.STUDIED:
      return '文章已学习完成';
    default:
      return '未知状态';
  }
};
</script>

<style scoped>
  /* Loading State */
  .loading-container {
    @apply flex flex-col items-center justify-center h-[calc(100vh-8rem)] w-full;
  }
  
  .loading-spinner {
    @apply w-16 h-16 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mb-4;
  }
  
  .loading-text {
    @apply text-xl text-white/80 font-medium;
  }
  
  /* Error State */
  .error-container {
    @apply flex flex-col items-center justify-center h-[calc(100vh-8rem)] w-full;
  }
  
  .error-icon {
    @apply text-5xl mb-4;
  }
  
  .error-title {
    @apply text-2xl font-bold mb-2;
  }
  
  .error-message {
    @apply text-white/70 mb-6 text-center;
  }
  
  .error-actions {
    @apply flex flex-wrap gap-3 justify-center;
  }
  
  .retry-button {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full transition-colors;
  }
  
  /* Status Container (用于显示文章状态) */
  .status-container {
    @apply flex flex-col items-center justify-center h-[calc(100vh-8rem)] w-full;
  }
  
  .status-icon {
    @apply text-6xl mb-4;
  }
  
  .status-title {
    @apply text-2xl font-bold mb-2;
  }
  
  .status-message {
    @apply text-white/70 text-center mb-6;
  }
  
  .regenerate-button {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full transition-colors;
  }
  
  /* Empty State */
  .empty-container {
    @apply flex flex-col items-center justify-center h-[calc(100vh-8rem)] w-full;
  }
  
  .empty-icon {
    @apply text-6xl mb-4;
  }
  
  .empty-title {
    @apply text-2xl font-bold mb-2;
  }
  
  .empty-message {
    @apply text-white/70 text-center;
  }
</style> 